<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液流通平衡表查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../img/favicon.ico">
    <link rel="stylesheet" href="../../../../element-theme/blue/index.css">
    <script src="../../../../js/echarts.js"></script>
</head>

<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;"
                 @submit.native.prevent
        >
            <el-form-item label="日期">
                <el-date-picker v-model="formDate" type="datetimerange" size="small" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"@click="load" >刷新</el-button>
                <el-button type="">导出</el-button>
                <!--                <el-button type="primary"@click="gettable" >生成统计图</el-button>-->
            </el-form-item>



        </el-form>

        <el-table v-if="tableData":data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                  style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change="">
            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="blood_variety" label="血液种类" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="abo_blood_type" label="血液abo类型" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="rh_blood_type" label="血液rh类型" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="InHp" label="血液入库总量" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="OutHp" label="血液出库总量" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="FailHp" label="血液失效总量" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="cleanIncrease" label="血液净增量" min-width="10%" align="center">
            </el-table-column>
        </el-table>
        <!--逻辑分页-->
        <el-pagination style="margin-top: 20px; text-align: center"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       v-if="tableData":total="tableData.length">
        </el-pagination>

        <el-row :gutter="20">
            <el-col :span="15"><div id="main1" style="border:1px;width:100%;height:400px;margin-top:5%;"></div></el-col>
            <el-col :span="9"><div id="main" style="border:1px ;width:100%;height:400px;margin-top:7%;"></div></el-col>
        </el-row>
    </template>
</div>

<script src="../../../../plugins/vue-2.6.11/vue.js"></script>
<script src="../../../../plugins/element-2.4.5/index.js"></script>
<script src="../../../../icons/iconfont.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>

    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    //部门选择

                    //时间数据的存放
                    formDate:[],
                    //数据字典
                    stateListAbo:{},
                    stateListRh:{},
                    stateListVarity:{},

                    myChart:null,
                    mychart1:null,
                    currentPage: 1, // 当前页码
                    total: null, // 总条数
                    pageSize:5 , // 每页的数据条数
                    //表格信息
                    tableData: [
                        {
                            blood_variety: "",
                            abo_blood_type: "",
                            rh_blood_type: "",
                            OutHp:"",
                            InHp: "",
                            FailHp: "",
                            cleanIncrease:""
                        }
                    ]
                }
            },
            created(){
                this.getNowTime ()
                this.getAboState()
                this.getRhState()
                this.getVarityState()
            },
            methods: {
                //每页条数改变时触发 选择一页显示多少行
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.currentPage = 1;
                    this.pageSize = val;
                },
                //当前页改变时触发 跳转其他页
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage = val;
                },
                //数据字典
                getAboState(){
                    fetch(`/aboType/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListAbo = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getRhState(){
                    fetch(`/rhType/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListRh = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getVarityState(){
                    fetch(`/bloodComposition/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListVarity = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getStateAbo(code){
                    for (var i=0;i<this.stateListAbo.length;i++){
                        if (this.stateListAbo[i].code == code){
                            return this.stateListAbo[i].name
                        }
                    }
                },
                getStateRh(code){
                    for (var i=0;i<this.stateListRh.length;i++){
                        if (this.stateListRh[i].code == code){
                            return this.stateListRh[i].name
                        }
                    }
                },
                getStateVarity(code){
                    for (var i=0;i<this.stateListVarity.length;i++){
                        if (this.stateListVarity[i].code == code){
                            return this.stateListVarity[i].composition
                        }
                    }
                },

                getNowTime () {
                    var date = new Date();
                    var year = date.getFullYear();
                    var lastyear = year-1
                    var month = (date.getMonth() + 1) < 10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
                    var day = date.getDate()<10?'0'+date.getDate():date.getDate();
                    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    this.formDate[1]=(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second)
                    this.formDate[0]=(lastyear + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second)

                },
                dateFormat(picker){
                    this.formDate = [picker[0], picker[1]]
                },
                myEcharts(bloodTy,bloodIn,bloodOut,bloodFail,bloodIncrease){
                    //实例化
                    this.mychart1 = echarts.init(document.getElementById('main1'));
                    const option = {
                        title:{
                            text:"各类血液总体出入情况",
                            left:'center'
                        },
                        legend: {
                            top:'8%',
                            data: ['入库血量','出库血量','失效血量','净增血量']
                        },
                        xAxis: {
                            type: 'category',
                            data: bloodTy,
                            axisLabel: {
                                borderWidth: 1,
                                clickable: true
                            },
                            silent: false,
                            triggerEvent: true
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '入库血量',
                                type: 'bar',
                                data: bloodIn
                            },
                            {
                                name: '出库血量',
                                type: 'bar',
                                data: bloodOut
                            },
                            {
                                name: '失效血量',
                                type: 'bar',
                                data: bloodFail
                            }
                            ,
                            {
                                name: '净增血量',
                                type: 'bar',
                                data: bloodIncrease
                            }
                        ]
                    };
                    this.mychart1.setOption(option);
                    this.mychart1.on('click', (params)=> {
                        if(params.componentType == "series"){
                            console.log(params)
                            this.pieChart(params.name,params.seriesIndex);
                        }
                    });
                },
                pieChart(bloodName,seriesIndex){
                    this.myChart = echarts.getInstanceByDom(document.getElementById('main')); //有的话就获取已有echarts实例的DOM节点。
                    if (this.myChart == null) { // 如果不存在，就进行初始化。
                        this.myChart = echarts.init(document.getElementById('main'));
                    };

                    let arr = Array.from(this.tableData)
                    // console.log(arr)
                    const abo = new Array();//string型数组
                    const rh = new Array();//int型数组
                    const useTower = new Array();
                    const name = new Array();
                    for (let i = 0; i < arr.length; i++) {
                        //用来判断查看哪种数据的详细统计
                        if (arr[i].blood_variety == bloodName &&seriesIndex==0 ) {
                            abo.push({value:Math.abs(arr[i].InHp),name:arr[i].abo_blood_type});
                            rh.push({value:Math.abs(arr[i].InHp),name:arr[i].rh_blood_type});
                            name.push(arr[i].rh_blood_type,arr[i].abo_blood_type);
                            useTower.push(name+"InHp")
                        } else if(arr[i].blood_variety == bloodName &&seriesIndex==1 ) {
                            abo.push({value:Math.abs(arr[i].OutHp),name:arr[i].abo_blood_type});
                            rh.push({value:Math.abs(arr[i].OutHp),name:arr[i].rh_blood_type});
                            name.push(arr[i].rh_blood_type,arr[i].abo_blood_type);
                            useTower.push(name+"OutHp")
                        }else if(arr[i].blood_variety == bloodName &&seriesIndex==2 ) {
                            abo.push({value:Math.abs(arr[i].FailHp),name:arr[i].abo_blood_type});
                            rh.push({value:Math.abs(arr[i].FailHp),name:arr[i].rh_blood_type});
                            name.push(arr[i].rh_blood_type,arr[i].abo_blood_type);
                            useTower.push(name+"FailHp")
                        }else if(arr[i].blood_variety == bloodName &&seriesIndex==3 ) {
                            abo.push({value:Math.abs(arr[i].cleanIncrease),name:arr[i].abo_blood_type});
                            rh.push({value:Math.abs(arr[i].cleanIncrease),name:arr[i].rh_blood_type});
                            name.push(arr[i].rh_blood_type,arr[i].abo_blood_type);
                            useTower.push(name+"cleanIncrease")
                        }
                    }
                    console.log(abo)
                    option = {
                        title:{
                            text:bloodName+"流通详情",
                            left:'center'
                        },

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            top:'8%',
                            bottom:'8%',
                            data:name
                        },
                        series: [
                            {
                                name: 'RH',
                                type: 'pie',
                                selectedMode: 'single',
                                radius: [0, '30%'],
                                label: {
                                    position: 'inner',
                                    fontSize: 14
                                },
                                labelLine: {
                                    show: false
                                },
                                data: rh
                            },
                            {
                                name: 'ABO',
                                type: 'pie',
                                radius: ['45%', '60%'],
                                labelLine: {
                                    length: 30
                                },
                                label: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#F6F8FC',
                                    borderColor: '#8C8D8E',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#6E7079',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#8C8D8E',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: '#4C5058',
                                            fontSize: 14,
                                            fontWeight: 'bold',
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#fff',
                                            backgroundColor: '#4C5058',
                                            padding: [3, 4],
                                            borderRadius: 4
                                        }
                                    }
                                },
                                data: abo
                            }
                        ]
                    };
                    this.myChart.clear();
                    this.myChart.setOption(option);
                },
                draw(){

                    let arr = Array.from(this.tableData).slice()
                    for (let i = 0; i < arr.length; i++) {
                        arr[i].blood_variety = this.getStateVarity(arr[i].blood_variety);
                        arr[i].rh_blood_type = this.getStateRh(arr[i].rh_blood_type);
                        arr[i].abo_blood_type = this.getStateAbo(arr[i].abo_blood_type);
                    }
                    console.log(this.tableData)
                    let itemIn = {};
                    let itemOut = {};
                    let itemFail = {};
                    let itemIncrease={};
                    for (let i = 0; i < arr.length; i++) {
                        itemIn[arr[i].blood_variety] = ~~itemIn[arr[i].blood_variety] + arr[i].InHp;
                        itemOut[arr[i].blood_variety] = ~~itemOut[arr[i].blood_variety] + arr[i].OutHp;
                        itemFail[arr[i].blood_variety] = ~~itemFail[arr[i].blood_variety] + arr[i].FailHp;
                        itemIncrease[arr[i].blood_variety] = ~~itemIncrease[arr[i].blood_variety] + arr[i].cleanIncrease;
                        console.log( arr[i].cleanIncrease)
                    }
                    ;
                    const bloodTy = new Array();//string型数组
                    const bloodIn = new Array();//int型数组
                    const bloodOut = new Array();//int型数组
                    const bloodFail = new Array();//int型数组
                    const bloodIncrease = new Array();//int型数组
                    //先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
                    Object.keys(itemIn).forEach(function (key) {

                        bloodTy.push(key);
                        bloodIn.push(itemIn[key]);
                        bloodOut.push(itemOut[key]);
                        bloodFail.push(itemFail[key]);
                        bloodIncrease.push(itemIncrease[key]);
                    })
                    console.log(bloodIncrease)
                    this.myEcharts(bloodTy,bloodIn,bloodOut,bloodFail,bloodIncrease);

                },
                load() {
                    if (this.myChart!=null){
                        this.myChart.dispose()
                    }
                    if(this.mychart1!=null){
                        this.mychart1.dispose()
                    }
                    this.tableData=undefined

                    fetch(`/bloodInformation/normal/getBloodFlowReport?startTime=${this.formDate[0]} &endTime=${this.formDate[1]}`).then(res => res.json()).then(res => {
                        this.tableData = res.data
                        //此是this的指向已经转变为method而非实例所以采用bind绑定this
                        this.$options.methods.draw.bind(this)();
                    })
                    //绘制图表数据

                }

                ,
            }
        });
    })()
</script>

</body>

</html>